<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 500px;
      }

      table tr td {
        border: 1px solid blue;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h3>购物车</h3>
      <hr />
      <table>
        <tr>
          <td>
            <input type="checkbox" v-model="checked" @change="checkAll" />
          </td>
          <td>id</td>
          <td>名称</td>
          <td>价格</td>
          <td>数量</td>
          <td>小计</td>
        </tr>
        <tr v-for="(item,index) in cartData" :key="item.id">
          <td>
            <input
              type="checkbox"
              name=""
              id=""
              :value="item.id"
              v-model="checkarr"
            />
          </td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button :disabled="item.num <=1" @click="item.num--">-</button>
            {{item.num}}
            <button @click="item.num++">+</button>
            <button @click="delFunc(index)">×</button>
          </td>
          <td>{{item.price * item.num}}</td>
        </tr>
        <tr>
            <td><button @click='fz'>反选</button></td>
            <td></td>
            <td></td>
            <td></td>
            <td>总数量:{{totalNum}}</td>
            <td>总价格:{{aa}}</td>
        </tr>
      </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          checkarr: [], //选中的input 的 value值
          checked: false, //全选按钮目前不是选中状态
          cartData: [
            {
              id: 1,
              name: "小米",
              price: 100,
              num: 1,
            },
            {
              id: 2,
              name: "华为",
              price: 200,
              num: 2,
            },
            {
              id: 3,
              name: "联想",
              price: 300,
              num: 1,
            },
          ],
        },
        methods: {
          delFunc: function (index) {
            confirm("确认要删除么？") && this.cartData.splice(index, 1);
            if(this.checkarr.length === this.cartData.length){
                    this.checked=true;
        
                }else{
                    this.checked =false;
                }
            // if(confirm("确认要删除么？") ){
            //     this.cartData.splice(index, 1);
            // }
          },
          //全选
          checkAll: function () {
            if (this.checked) {
              this.cartData.forEach((item) => {
                //将选中的input框的value值放到 数组中
                this.checkarr.push(item.id);
              });
            } else {
              this.checkarr = [];
            }
          },
          //反转 
          fz:function(){
            this.cartData.forEach((item)=>{
              let zz=this.checkarr.indexOf(item.id);
              if(zz == -1){
                this.checkarr.push(item.id)
              }else{
                this.checkarr.splice(zz,1)
              }
            })
          }
        },
        computed: {
            totalNum:function(){
                var sum =0;
                console.log(this.checkarr);
                this.cartData.forEach((item)=>{
                    let pos=this.checkarr.indexOf(item.id);
                    if(pos != -1){
                        sum +=item.num;
                    }
                });
                return sum;
            },
            aa:function(){
                var sum =0;
                console.log(this.checkarr);
                this.cartData.forEach((item)=>{
                    let bb=this.checkarr.indexOf(item.id);
                    if(bb != -1){
                        sum +=item.num*item.price;
                    }
                });
                return sum;
            }
        },
        watch: {
            checkarr:function(){
                console.log('监听');
                if(this.checkarr.length === this.cartData.length){
                    this.checked=true;
        
                }else{
                    this.checked =false;
                }
            }
        },    
        
      });
    </script>
  </body>
</html>
